<template>
  <div class="box">
    <br />
    <el-row class="border">
      <el-button type="primary" @click="submitForm">新增日程</el-button>
    </el-row>
    <br />

    <!-- 日程 -->
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column
        label="日程"
        prop="name"
        align="center"
        min-width="120"
      />
      <el-table-column
        label="时间"
        prop="timeStr"
        align="center"
        min-width="120"
      />
      <el-table-column
        label="地点"
        prop="address"
        align="center"
        min-width="120"
      />

      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding"
        width="300"
      >
        <template #default="scope">
          <el-button type="text" @click="editFN(scope.row)">编辑</el-button>
          <el-button type="text" @click="delFN(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="form.pageNum"
      v-model:limit="form.pageSize"
      :total="total"
      @pagination="initData"
    />

    <!-- 新增日程 -->
    <el-dialog
      v-model="showDialog"
      width="40%"
      append-to-body
      center
      draggable
      @close="close"
      v-if="showDialog"
      :title="addForm.id ? '编辑日程 ' : '新增日程'"
    >
      <el-form
        ref="formRef"
        :model="addForm"
        label-width="120px"
        :rules="rules"
        class="formName"
      >
        <el-form-item label="日程名称:" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="时间安排:" prop="timeRange">
          <el-date-picker
            v-model="addForm.timeRange"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
          /> </el-form-item
        ><el-form-item label="日程地点:" prop="address">
          <el-input v-model="addForm.address" /> </el-form-item
        ><el-form-item label="日程介绍:" prop="introduction">
          <!-- <el-input type="textarea" rows="4" v-model="addForm.introduction" /> -->
          <u-editor v-model="addForm.introduction" :min-height="190" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="btnOkFN">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import {
  getList,
  addSchedule,
  editSchedule,
  deleteApi,
} from "@/api/match/schedule.js";
const router = useRoute();
const showDialog = ref(false);
const id = ref(router.query.id);
const total = ref();
const list = ref([]);
const data = reactive({
  form: {
    pageSize: 10,
    pageNum: 1,
    orderIndex: 0,
  },
  addForm: {},
  rules: {
    name: { required: true, message: "请输入日程名称", trigger: "blur" },
    timeRange: [
      {
        required: true,
        message: "请选择报名日期",
        trigger: "change",
      },
    ],
    address: { required: true, message: "请输入日程地点", trigger: "blur" },
    // introduction: {
    //   required: true,
    //   message: "请输入日程介绍",
    //   trigger: "blur",
    // },
  },
});

const { proxy } = getCurrentInstance();

const { form, addForm, rules } = toRefs(data);

initData();
// 获取日程列表用户信息
async function initData() {
  form.value.cptId = id.value;
  let res = await getList(form.value);
  total.value = res.total;
  list.value = res.rows;
}

function submitForm() {
  showDialog.value = true;
}

function close() {
  showDialog.value = false;
  addForm.value = {};
  initData();
}

// 新增/编辑
function btnOkFN() {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      if (addForm.value.id) {
        // 编辑
        addForm.value.index = 1;
        addForm.value.timeRange = addForm.value.timeRange + "";
        let res = await editSchedule(addForm.value);
        if (res.code == 200) {
          proxy.$modal.msgSuccess("保存成功");
          showDialog.value = false;
          initData();
        } else {
          proxy.$modal.msgError("保存失败");
        }
      } else {
        // 添加
        addForm.value.index = 0;
        addForm.value.cptId = id.value;
        addForm.value.timeRange = addForm.value.timeRange + "";
        let res = await addSchedule(addForm.value);
        if (res.code == 200) {
          proxy.$modal.msgSuccess("保存成功");
          showDialog.value = false;
          initData();
        } else {
          proxy.$modal.msgError("保存失败");
        }
      }
      addForm.value = {};
    } else {
      proxy.$modal.msgError("请完善信息");
    }
  });
}

function editFN(row) {
  addForm.value = row;
  addForm.value.timeRange = row.timeRange.split(",");
  showDialog.value = true;
}

// 删除
function delFN(row) {
  proxy.$modal
    .confirm('是否确认删除日程名称为"' + row.name + '"的数据项？')
    .then(async function () {
      addForm.value.ids = row.id;
      await deleteApi(addForm.value);
    })
    .then(async () => {
      await initData();
      proxy.$modal.msgSuccess("操作成功");
    })
    .catch(() => {});
}
</script>

<style scope>
.box {
  padding: 50px;
}
.border {
  border: 0;
}
.formName{
  padding-right: 50px;
}
</style>
